<!DOCTYPE html>
<html lang="zh">
<head>
    <title>个人信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../asset/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../asset/css/common.css">
    <script src="../asset/lib/jquery321.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 导入导航条 -->
    <div class="layui-header">
        <div class="layui-logo">个人信息管理中心</div>

        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">
                欢迎光临:&nbsp;&nbsp;<span id="span-nickname"></span>
            </li>
            <li class="layui-nav-item"><a onclick="logout()">注销</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="userinfo.html">个人信息</a>
                </li>
                <li class="layui-nav-item">
                    <a href="useredit.html">修改信息</a>
                </li>
                <li class="layui-nav-item">
                    <a href="pwdedit.html">修改密码</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- END：导航条 -->
    <div class="layui-body layui-bg-gray" style="padding: 30px 40px;">
        <!-- -------------编写的HTML代码从这里开始------------- -->
        <div class="layui-row layui-col-space20">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">个人信息明细</div>
                    <div class="layui-card-body" style="padding: 5px 10px 20px 20px;">
                        <!-- 个人情况 -->
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">昵称：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="nickname-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">性别：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="gender-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">出生日期：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="birthday-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">工作年限：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="work-year-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">婚姻状况：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="marriage-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">学历：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="education-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">联系电话：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="contact-div"></div>
                            </div>
                        </div>
                        <div class="layui-row layui-col-space30">
                            <div class="layui-col-md2">
                                <div style="line-height: 18px;">邮箱：</div>
                            </div>
                            <div class="layui-col-space3">
                                <div style="line-height: 18px;" id="email-div"></div>
                            </div>
                        </div>
                        <!-- END:个人情况 -->
                    </div>
                </div>
                <div class="layui-card">
                    <button class="layui-btn" onclick="goEdit()" style="margin: 0 auto;">修改信息</button>
                </div>
            </div>

        </div>
        <!-- -------------END：编写的HTML代码不超过这-------------- -->
    </div>
</div>
<!-- 导入代码库文件 -->
<script src="../asset/lib/layui/layui.js"></script>
<script src="../asset/js/layui-elem.js"></script>
<script src="../asset/js/core.js"></script>
<!-- END：代码库文件 -->
<!-- ================================在这里编写页面的js代码================================ -->
<script>
    //检查登录
    util.checkLogin();
    var userInfo = util.data.get("userInfo");
    $('#span-nickname').text(userInfo.nickname);

    function goEdit() {
        window.location.href = "useredit.html";
    }

    $(function () {
        $('#nickname-div').text(userInfo.nickname);
        $('#gender-div').text(userInfo.gender);
        $('#birthday-div').text(userInfo.birthday);
        if (userInfo.workYear) {
            $('#work-year-div').text(userInfo.workYear + '年');
        }
        $('#marriage-div').text(userInfo.marriage);
        $('#education-div').text(userInfo.education);
        $('#contact-div').text(userInfo.contact);
        $('#email-div').text(userInfo.email);
        console.log('userInfo', userInfo);
        console.log('用户信息页面加载完成')
    });

    //注销登录
    function logout() {
        util.data.remove("userInfo");
        util.httpRequest.get("../logout", {}, function (msg) {
            if (msg.code === 200) {
                layer.msg('注销成功', {
                    offset: '50px'
                    , icon: 1
                    , time: 1000
                });
                //把登录用户数据保存到浏览器
                setTimeout(function () {
                    window.location.href = "login.html";
                }, 1000)
            } else {
                layer.msg(msg.errorMessage, {
                    offset: '50px'
                    , icon: 2
                    , time: 2000
                });
            }
        });
    }
</script>
<!-- ================================END:在这里编写页面的js代码================================ -->
</body>
</html>